<template>
	<view class="container">
		<view class="successIcon">
			<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721805100069410.png" mode=""></image>
			<view class="successTip">
				购买成功
			</view>
			<view class="successFont">
				感谢您为乡村振兴贡献一份力量
			</view>
		</view>
		<view class="thank">
			<view class="thank_title">
				来自{{ shopName }}商户的感谢
			</view>

			<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721793022662363.png" mode=""></image>

			<view class="video">
				<video :src="product.video"></video>
			</view>
		</view>

		<view class="<strong>give_btn</strong>">
			<view class="back" @click="goBack">
				返回
			</view>
			<button class="back giveGift" @click="shareFun" >
				直接赠送
			</button>
		</view>
		<!-- <view class="toGiftLibrary" @click="nav_to('/pages/tab/gift')">
			我的礼品库
		</view> -->
		<!-- <sharePopup ref="sharePopup" content="是否确认全部赠送？" v-if="isShow" @hidePopup='hidePopup' @shareGift="shareGift"></sharePopup> -->
		
		<view class="wrap" v-if="isShow">
			<view class="main">
				<view class="titbox">
					<view class="tit">
						{{'是否确认全部赠送？'}}
					</view>
				</view>
				<view class="btn_body">
					<button class="btn_cell cancel"  @click.stop="isShow=false">
						取消
					</button>
					<button class="btn_cell confirm" open-type="share">
						确定
					</button>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>

	export default {
		data() {
			return {
				load: false,
				shopName: '', //商户名
				product: {}, //产品信息
				giverName: '', //发件人姓名
				onlyKey: '', //批次号
				isShow:false,
				shareParams:{}
			};
		},
		computed: {
			
		},
		
		watch: {
		
		},
		
		onReady() {
		
		},
		async onLoad(e) {
			console.log(e);
			this.shopName = e.shopName	//传了个商户名过来，如果数据变多了可以传ShopID调/Shop/Detail接口
			this.product = this.$store.state.paySuccess;
			this.giverName = uni.getStorageSync('user').Name
			this.load = true
		},
		async onShow() {
		},
		
		onUnload() {
		},
		methods: {
			shareFun(){
				this.isShow = true
			},
			hidePopup(val){
				this.isShow = val
			},
			// async shareGift(){
			// 	await this.giveWXfriends();
			// 	let pid = uni.getStorageSync('user').UserID;
			// 	let shareTitle = `${this.giverName}向你赠送了${this.product.productName}，请尽快领取`;
			// 	let sharePath = `pages/shop/selectAddress?ABC=${this.onlyKey}&pid=${pid}`;
			// 	let imageUrl = this.product.coverImg;
			// 	this.shareParams = {
			// 		title: shareTitle,
			// 		path: sharePath,
			// 		imageUrl: imageUrl
			// 	}
			// 	this.$store.commit('setshareParams',this.shareParams)
			// 	console.log('父组件----------',this.shareParams);
			// },
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 赠送微信好友
			async giveWXfriends() {
				// 新建赠送批次接口
				let res = await this.$api.post('/SendGift/Add', {
					ProductID: this.product.ProductID,
					ProductStyle: this.product.Style,
					Qty: this.product.Qty,
					title: '',
					SenderName: '',
					SenderMobile: '',
					IsSingleSend:1
				});
				if (res.code === 0) {
					this.onlyKey = res.data
				}else{
					this.$pv.msg(res.message)
				}
			},
		},
		
		// 分享好友
		async onShareAppMessage(res) {
			await this.giveWXfriends();
			let pid = uni.getStorageSync('user').UserID;
			let shareTitle = `${this.giverName}向你赠送了${this.product.productName}，请尽快领取`;
			let sharePath = `pages/shop/selectAddress?ABC=${this.onlyKey}&pid=${pid}`;
			let imageUrl = this.product.coverImg;
			this.isShow = false
			return {
				title: shareTitle,
				path: sharePath,
				imageUrl: imageUrl
			}
		
		},
	}
</script>

<style lang="scss">
	page {
		// height: 100%;
		background: #fff;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 120rpx;

		.successIcon {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 96rpx;
				height: 98rpx;
			}

			.successTip {
				font-size: 32rpx;
				color: #FF6030;
				font-weight: bold;
				margin: 30rpx 0;
			}

			.successFont {
				font-size: 28rpx;
				color: #666666;
				margin: 0 0 20rpx 0;
			}
		}

		.thank {
			width: 686rpx;
			height: 566rpx;
			background: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721793074373233.png');
			background-size: cover;
			margin: 30rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 55rpx 0;


			.thank_title {
				font-weight: bold;
				font-size: 36rpx;
				color: #733204;
			}

			image {
				width: 152rpx;
				height: 8rpx;
				margin: 10rpx 0 35rpx 0;
			}

			.video {
				width: 600rpx;
				height: 380rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				video{
					width: 100%;
					height: 100%;
				}
			}

		}


		.give_btn {
			display: flex;
			justify-content: space-evenly;
			width: 686rpx;

			.back {
				width: 300rpx;
				height: 88rpx;
				border-radius: 44rpx;
				border: 2rpx solid #FF6030;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: #FF6030;
			}

			.giveGift {
				width: 300rpx;
				height: 88rpx;
				background: linear-gradient(102deg, #FF9D26 0%, #FE4E01 100%);
				border: none;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
	.toGiftLibrary{
		color: #47a0ff;
		text-decoration: underline;
		position: fixed;
		bottom: 80rpx;
	}
	
	button{
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
	}
	button::after{
		border: 0;
	}
	.wrap{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		transition: all 0.3 ease-in; 
		.main{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 85%;
			background-color: #fff;
			border-radius: 24rpx;
			overflow: hidden;
			.titbox{
				padding: 46rpx;
				border-bottom: 1rpx solid #f2f2f2;
				.tit{
					text-align: center;
					color: #7f7f7f;
					font-size: 32rpx;
				}
			}
			.btn_body{
				display: flex;
				.btn_cell{
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-weight: bold;
					height: 110rpx;
					box-sizing: border-box;
				}
				.cancel{
					border-right: 1rpx solid #f2f2f2;
				}
				.confirm{
					color: #576b95;
				}
			}
		}
	}
</style>